<template>
  <button class="wx-button">{{datas.text}}</button>
</template>

<script>
export default {
  name: 'wx-button',
  props: {
    datas: {
      type: Object,
      default: () => {
        return {
          text: 'login'
        }
      }
    }
  }
}
</script>

<style scoped>
  .wx-button{
    z-index: 1;
    padding: 0 30px;
    min-width: 175px;
    height: 60px;
    border: 1px solid;
    border-color: #dcdcdc;
    font-size: 14px;
    border-radius: 0;
    line-height: 59px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-family: "Open Sans", sans-serif;
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    color: #000000;
    background: #ffffff;
  }
  .wx-button:hover {
    background-color: #30336b;
    color: #ffffff;
    border-color: #30336b;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  }
</style>
